<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>确认支付</title>
	<meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="yes" name="apple-touch-fullscreen"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="../../static/css/style.css">
</head>
<body>
	<div class="single_wraper">
		<div class="header">
			<div class="banner" id="banner"></div>
			<!-- <video style="width:100%;" id="video" controls src="http://win.web.rg03.sycdn.kuwo.cn/fa29e1890c58cc3dd7b099db4c9a6293/5744010e/resource/m1/4/9/1475630951.mp4"></video> -->
			<div class="toCalendar" id="toCalender">
				<img src="img/time.png" alt="">
				<span>2016-05-24 星期二</span>
				<i class="icon_right"></i>
			</div>
			<div class="toMap" id="toMap">
				<img src="img/address.png" alt="">
				<span>深圳市华侨城创意园</span>
				<i class="icon_right"></i>
			</div>
			<div class="dls">
				<dl class="days">
					<dt><img src="img/days.png"></dt>
					<dd>1天</dd>
				</dl>
				<dl class="persens" id="persens">
					<dt><img src="img/persens.png"></dt>
					<dd>1-20人</dd>
				</dl>
				<dl class="safe">
					<dt><img src="img/safe.png"></dt>
					<dd>意外险</dd>
				</dl>
			</div>
		</div>
		<div class="body" id="body">
			<ul class="tab" id="tab">

			</ul>
			<div class="tab_con">
				<iframe id="frame" src="" frameborder="0" style="width:100%;height:500px;"></iframe>
			</div>
		</div>
		<div class="attention">
			<h1 class="attentionTitle">注意事项</h1>
			<p class="explain">

			</p>
		</div>
		<div class="leaders">
			<h1 class="title"><i></i>执行领队</h1>
			<div class="leader">
				
			</div>
		</div>
		<div class="headPortraits">
			<div class="pics">
				
			</div>
			<div class="personNum"></div>
		</div>
		<div class="comments">
			<h1 class="title"><i></i>评论</h1>
			<!-- <div class="comment">
				<dl>
					<dt><img src="img/stx.jpg"></dt>
					<dd>
						<p>Sailing<span class="label">lv2</span><span class="label">达人</span><span class="right">3分钟前</span></p>
						<p>美女 90后</p>
					</dd>
				</dl>
				<div class="stars"></div>
				<p class="content">这活动挺不错的，还可以认识很多帅哥美女，全程玩的很开心，领队很有责任心。</p>
			</div>
			<div class="comment">
				<dl>
					<dt><img src="img/stx1.jpg"></dt>
					<dd>
						<p>Sailing<span class="label">lv2</span><span class="label">达人</span><span class="right">3分钟前</span></p>
						<p>美女 90后</p>
					</dd>
				</dl>
				<div class="stars"></div>
				<p class="content">这活动挺不错的，还可以认识很多帅哥美女，全程玩的很开心，领队很有责任心。</p>
			</div> -->
			<div class="lookmore">查看更多<i></i></div>
		</div>
	</div>
</body>
<script src="js/zepto.min.js"></script>
<script>
	$(function(){
		for (var i = 0; i < $(".explain").length; i++) {
            var m = $(".explain").eq(i);
            if (m.text().length > 65) {
                m.attr("content", m.text());
                m.html(m.text().substr(0, 65) + "...<a name=\"zhankai\" href=\"javascript:;\">详情</a>");
            }
        }
        $("a[name=zhankai]").live("tap", function () {
            $(this).parent().html($(this).parent().attr("content") + "<a name=\"yinchang\" href=\"javascript:;\">隐藏</a>");
        });
        $("a[name=yinchang]").live("tap", function () {
            $(this).parent().html($(this).parent().attr("content").substr(0, 65) + "...<a name=\"zhankai\" href=\"javascript:;\">详情</a>");
        });

        Date.prototype.format = function (format) {
	        var o = {
	            "M+": this.getMonth() + 1, //month
	            "d+": this.getDate(), //day
	            "h+": this.getHours(), //hour
	            "m+": this.getMinutes(), //minute
	            "s+": this.getSeconds(), //second
	            "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
	            "S": this.getMilliseconds() //millisecond
	        };

	        if (/(y+)/.test(format)) {
	            format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	        }
	        if (/(W)/.test(format)) {
	            var week = ["日", "一", "二", "三", "四", "五", "六"];
	            format = format.replace(RegExp.$1, (week[this.getDay()]));
	        }
	        for (var k in o) {
	            if (new RegExp("(" + k + ")").test(format)) {
	                format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
	            }
	        }
	        return format;
	    };

        $('.lookall').on('tap',function(){
        	//alert(1)
        	var obj = document.getElementById('body').style;
        	console.log(obj.height);
        	if(obj.height==""){  
		        obj.height=500+"px";  
		        obj.overflow="hidden";   
		    }else{  
		        obj.height="";  
		        obj.overflow="";  
		    }  
        });
        $('.lookall').trigger('tap');
        
        $('#toCalender').on('tap',function(){
        	alert("日历")
        });
        $('#toMap').on('tap',function(){
        	alert("地图")
        });
        $('#video').on('tap',function(){
        	alert("视频")
        });
        var jsonstr = '{"ver":"1.1.0000","ret":true,"errmsg":"成功","errcode":200,"data":{"id":1,"multipleurl":"https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png","multipleType":0,"activityName":"下周去红树林","activityType":true,"respOutdoorActivityDetailList":[{"activityId":3,"activityName":"周末去骑车","multipleUrl":"https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png","multiMediaType":0,"startTime":1464339947000,"endTime":1464339950000,"limitNum":12,"activityType":true,"destination":"华侨城","activityParameter":"a","activityIntroduceUrl":"http://www.youku.com"},{"activityId":4,"activityName":"周末去徒步","multipleUrl":"https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png","multiMediaType":0,"startTime":1464339947000,"endTime":1464339950000,"limitNum":88,"activityType":true,"destination":"世界之窗","activityParameter":"aa","activityIntroduceUrl":"http://www.baidu.com"}]},"sign":null}';
        var jsonobj = JSON.parse(jsonstr);
        var jsonstr2 = '{"ver": "1.1.0000","ret": true,"errmsg": "成功","errcode": 200,"data": {"activityId": 2,"note": "本次活动记得穿上登山鞋！","masterList": [{"masterId": 1,"iconUrl": "http://img2.a0bi.com/upload/ttq/20160420/1461129996264.jpg","masterName": "扎克伯格"},{"masterId": 2,"iconUrl": "http://img2.a0bi.com/upload/ttq/20160420/1461129996264.jpg","masterName": "埃伦 马斯克"}],"collectionUserList": [{"userId": 1,"iconUrl": "http://img2.a0bi.com/upload/ttq/20160420/1461129996264.jpg","userName": "库克"},{"userId": 2,"iconUrl": "http://img2.a0bi.com/upload/ttq/20160420/1461129996264.jpg","userName": "拉里 佩奇"}],"commentList": [{"iconUrl": "http://img2.a0bi.com/upload/ttq/20160420/1461129996264.jpg","platformLevel":3,"userName":"乔丹","commentId": 1,"userId": 3,"score": 5,"commentContent": "这活动挺好玩！","commentTime": 1464785931428},{"iconUrl": "http://img2.a0bi.com/upload/ttq/20160420/1461129996264.jpg","platformLevel":2,"userName":"李宁","commentId": 2,"userId": 4,"score": 2,"commentContent": "这活动不好玩！","commentTime": 1464785931428}]},"sign": null}';
       	var jsonobj2 = JSON.parse(jsonstr2);
        console.log(jsonobj2);
        if(jsonobj.data.multipleType == 0){
        	$('#banner').append('<img src="' + jsonobj.data.multipleurl + '">')
        }else{
        	$('#banner').append('<video style="width:100%;" src="' + jsonobj.data.multipleurl + '">')
        }
	        
	    $.each(jsonobj.data.respOutdoorActivityDetailList,function(index,value){
	    	$('#tab').append('<li>'+ value.activityName +'</li>')
	    });
	    $('#tab li').on('tap',function(){
        	var ind = $(this).index();
        	$(this).css('border-bottom','2px solid #ed4d4d').siblings().css('border-bottom','2px solid #fff');
        	var q_stime = new Date(jsonobj.data.respOutdoorActivityDetailList[ind].startTime);
		    var stime = q_stime.format("yyyy年MM月dd日 星期W");
		    var q_etime = new Date(jsonobj.data.respOutdoorActivityDetailList[ind].endTime);
		    var etime = q_etime.format("yyyy年MM月dd日 星期W");
		   	var address = jsonobj.data.respOutdoorActivityDetailList[ind].destination;
		   	var limitNum = jsonobj.data.respOutdoorActivityDetailList[ind].limitNum;
		   	var activityIntroduceUrl = jsonobj.data.respOutdoorActivityDetailList[ind].activityIntroduceUrl;
		    $('#toCalender span').html(stime);
		    $('#toMap span').html(address);
		    $('#persens dd').html('1-'+ limitNum + '人');
		    $('#frame').attr('src',activityIntroduceUrl);

		    $('.explain').html(jsonobj2.data.note);
		    $('.personNum').html(jsonobj2.data.collectionUserList.length + '人喜欢');
		    $.each(jsonobj2.data.masterList,function(index,value){
		    	var masters = '<dl data-id="' + value.masterId + '">'+
								   '<dt><img src="' + value.iconUrl + '"/></dt>'+
								   '<dd>' + value.masterName + '</dd>'+
							   '</dl>';
				$('.leader').append(masters)
		    });
		    $.each(jsonobj2.data.collectionUserList,function(index,value){
		    	var collectionusers = '<img src="' + value.iconUrl + '"/>';
		    	$('.pics').append(collectionusers)
		    });
		    $.each(jsonobj2.data.commentList,function(index,value){
		    	var comments =  '<div class="comment">'+
									'<dl>'+
										'<dt><img src="' + value.iconUrl + '"></dt>'+
										'<dd>'+
											'<p>' + value.userName + '<span class="label">LV' + value.platformLevel + '</span><span class="label">达人</span><span class="right">3分钟前</span></p>'+
											'<p>美女 90后</p>'+
										'</dd>'+
									'</dl>'+
									'<div class="stars" style="background-position: 0 -' + (value.score-1)*13 + 'px"></div>'+
									'<p class="content">' + value.commentContent + '</p>'+
								'</div>';
		    	$('.comments').append(comments)
		    })
		    
        });
        $('.tab li').eq(0).trigger('tap')

	})
		
</script>
</html>